<template>
    <div class="user-center">
        <!-- 个人信息 -->
        <div class="user-info">
            <!-- 头像 -->
            <div class="ava-info">
                <div class="avatar">
                    <el-avatar shape="square" :size="100" fit="fill" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
                </div>
                <!-- 名称等 -->
                <div class="info">
                    <!-- 用户昵称 -->
                    <div class="nick-name">
                        cch
                    </div>
                    <!-- 加入时间 -->
                    <div class="time">
                        2024-04-04 加入平台
                    </div>
                    <!-- 编辑 -->
                    <div class="edit">
                        <el-button type="primary" plain>编辑个人信息</el-button>
                    </div>
                </div>
            </div>
            
            <!-- 收货地址编辑 -->
            <div class="address">
                <el-button type="primary" plain @click="goAddress">编辑收货地址</el-button>
            </div>
        </div>
        <!-- 个人信息END -->
        <!-- 商品列表 -->
        <div class="user-lis">
            <div class="list-tab">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="我发布的" name="first"></el-tab-pane>
                    <el-tab-pane label="我下架的" name="second"></el-tab-pane>
                    <el-tab-pane label="我卖出的" name="third"></el-tab-pane>
                    <el-tab-pane label="我买到的" name="fourth"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="main">
                <div class="list">
                    <GoodList :list="product"></GoodList>
                </div>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total"
                    @current-change="currentChange"
                    ></el-pagination>
                </div>
                <!-- 分页END -->
            </div>
        </div>
        <!-- 商品列表END -->
    </div>
</template>
<script>
export default{
    data(){
        return{
            activeName:'first',
            product: [{
                id:1,
                img:'images/goods/good1.jpg',
                sku_name:'默认商品',
                time:'2024-04-04 12:00',
                title: '洗面奶',
                selling_price: '99.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:2,
                img:'images/goods/good2.jpg',
                sku_name:'默认商品',
                time:'2024-04-04 12:00',
                title: '洗面奶',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:3,
                img:'images/goods/good3.jpg',
                sku_name:'默认商品',
                title: '洗面奶',
                time:'2024-04-04 12:00',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:4,
                img:'images/goods/good1.jpg',
                sku_name:'默认商品',
                time:'2024-04-04 12:00',
                title: '洗面奶',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:5,
                img:'images/goods/good2.jpg',
                sku_name:'默认商品',
                time:'2024-04-04 12:00',
                title: '洗面奶',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:6,
                img:'images/goods/good1.jpg',
                sku_name:'默认商品',
                time:'2024-04-04 12:00',
                title: '洗面奶',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            },{
                id:7,
                img:'images/goods/good3.jpg',
                sku_name:'默认商品',
                time:'2024-04-04 12:00',
                title: '洗面奶',
                selling_price: '100.00',
                price: '100.00',
                seller_ava:'/avatar/男孩.png',
                seller_name:'小黄'
            }], // 商品列表
            total: 0, // 商品总量
            pageSize: 15, // 每页显示的商品数量
            currentPage: 1, //当前页码
        }
    },
    created:{

    },
    methods:{
         // 标签选择
         handleClick(tab, event) {
            console.log(tab, event);
        },
        // 页码变化调用currentChange方法
        currentChange(currentPage) {
            this.currentPage = currentPage;
        },
        // 收货地址
        goAddress(){
            this.$router.push('/address');
        },
    }
}
</script>
<style scoped>
/* 个人信息 */
.user-center .user-info{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.user-center .user-info div{
    display: inline;
}
/* 头像和基础信息 */
.user-center .user-info .ava-info {
    display: flex;
    width: 400px;
}
.user-center .user-info .ava-info .avatar{
    width: 100px;
}
.user-center .user-info .ava-info .info{
    height: 100px;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 20px;
}
.user-center .user-info .ava-info .info .nick-name{
    font-weight: 800;
    font-size: 30px;
    text-align: left;
}
.user-center .user-info .ava-info .info .time{
    font-size: 14px;
}
.user-center .user-info .ava-info .info .edit{
    display: flex;
    justify-content: left;
}
.user-center .user-info .ava-info .info div{
    height: 40px;
    text-align: center;
}
/* 收货地址 */
.user-center .user-info .address{
    display: flex;
    align-items: center;
}
/* 个人信息END */

/* 商品列表 */
.user-center .user-lis{
    border-radius: 10px;
    background-color: #fff;
    padding: 0 20px;
}
.user-center .user-lis .main .list{
    padding-bottom: 10px;
}
.user-center .user-lis .main .pagination{
    padding-bottom: 10px;
}
/* 商品列表END */
</style>